<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>歌手管理</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<!-- iframe 基本通用样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/common/iframe.css" />
		<!-- 阿里图标库 -->
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
	</head>
	<body>
		<div id="app">
			<div class="header">
				<i class="el-icon-postcard"></i>
				音乐管理/歌手管理
			</div>
			<div class="main">
				<el-input placeholder="请输入歌手名称" size="mini" v-model="name" style="width:150px"></el-input>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getPageInfo">搜索</el-button>
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddForm()">添加</el-button>
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="deteleBatch">批量删除</el-button>
				<!-- 列表数据 -->
				<table class="listTable" border="1px">
					<tr>
						<th>
							<input type="checkbox" class="chexkbox" @change="allSelect" :checked="isAllSelect">
						</th>
						<th>歌手名</th>
						<th>歌手图片</th>
						<th>歌手介绍</th>
						<th>状态</th>
						<th width="200">基本操作</th>
					</tr>
					<tr v-for="item in list">
						<td>
							<input type="checkbox" style="width:20px" :value="item.singerId" :checked="isAllSelect"
								@change="ckSelect">
						</td>
						<td>{{item.singerName}}</td>
						<td><img :src="item.singerImg" width="40px"></td>
						<td>{{item.singerRemarks}}</td>
						<td>
							<el-switch v-model="item.singerStatus" active-color="#13ce66" inactive-color="#ff4949"
								:active-value="0" :inactive-value="1"
								@change="changeStatus(item.singerId,item.singerStatus)">
							</el-switch>
						</td>
						<td style="width:200px">
							<!-- 查看所有歌曲 -->
							<span style="padding-right:8px">
								<el-button type="primary" size="mini" @click="getSongBySingerId(item.singerId)" circle>
									<i class="iconfont icon-yinle2" style="font-size: 12px;"></i>
								</el-button>
							</span>
							<!-- 查看所有专辑及专辑下的歌曲 -->
							<span style="padding-right:8px">
								<el-button type="primary" size="mini" @click="getAlbumSongBySingerId(item.singerId)"
									circle>
									<i class="iconfont icon-gedan" style="font-size: 12px;"></i>
								</el-button>
							</span>
							<!-- 修改 -->
							<span style="padding-right:8px">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="update(item.singerId)"
									circle>
								</el-button>
							</span>
							<!-- 删除 -->
							<span style="padding-right:8px">
								<el-button type="danger" icon="el-icon-delete" size="mini"
									@click="deleteById(item.singerId)" circle>
								</el-button>
							</span>
						</td>
					</tr>
				</table>
				<!-- 分页 -->
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="pageCurrent" :page-sizes="[4, 8]" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

				<!-- 歌手所有歌曲展示 -->
				<el-dialog v-model="songList" id="el-dialog" title="全部歌曲" :visible.sync="allSongVisible" width="40%">
					<el-tag size="small" type="success" v-for="song in songList"
						style="margin-right: 5px; display: inline-block;">
						{{song.songName}}
					</el-tag>
					<div slot="footer">
						<el-button @click="allSongVisible = false" size="mini">取 消</el-button>
					</div>
				</el-dialog>

				<!-- 全部歌单以及歌单下的所有歌曲显示页面 树形控件 -->
				<el-dialog id="el-dialog" title="全部歌曲" :visible.sync="allAlbumVisible" width="40%">
					<el-tree :data="albumList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
					<div slot="footer">
						<el-button @click="allSongVisible = false" size="mini">取 消</el-button>
					</div>
				</el-dialog>

				<!-- 添加表单 -->
				<el-dialog id="el-dialog" title="添加歌曲" :visible.sync="addFormVisible" width="40%">
					<el-form class="addform" :model="addFrom" ref="addForm" label-position="right" label-width="70px"
						size="mini" :rules="rules">
						<el-form-item label="歌手名" prop="singerName">
							<el-input v-model="addFrom.singerName" placeholder="请输入歌手名" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload ref="uploadImage" class="upload-demo"
								action="http://localhost:8080/singer/uploadAddImg" :on-change="handleChangeAddImg"
							    :headers="headers" :on-success="uploadAddImgSuccess" :file-list="fileImgList" list-type="picture"
								:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="介绍">
							<el-input type="textarea" v-model="addFrom.singerRemarks" name="singerRemarks"
								placeholder="请输入备注" rows=3 style="width:300px">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="addFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="addSubmit" size="mini">提 交</el-button>
					</div>
				</el-dialog>

				<!-- 修改表单 -->
				<el-dialog id="el-dialog" title="修改歌曲信息" :visible.sync="updateFormVisible" width="40%">
					<el-form class="updateform" :model="updateFrom" ref="updateForm" label-position="right"
						label-width="70px" size="mini" :rules="rules">
						<el-form-item label="歌曲名" prop="singerName">
							<el-input v-model="updateFrom.singerName" placeholder="请输入歌曲名" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-radio v-model="updateFrom.singerStatus" :label="0">正常</el-radio>
							<el-radio v-model="updateFrom.singerStatus" :label="1">异常</el-radio>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload ref="uploadImage" class="upload-demo"
								action="http://localhost:8080/singer/uploadAddImg" :on-change="handleChangeAddImg"
							    :headers="headers" :on-success="uploadUpdateImgSuccess" :file-list="fileImgList" list-type="picture"
								:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="介绍">
							<el-input type="textarea" v-model="updateFrom.singerRemarks" name="singerRemarks"
								placeholder="请输入备注" rows=3 style="width:300px">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="updateFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="updateSubmit(updateFrom.singerId)" size="mini">提 交</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</body>
	<script src="../../js/menus/singer.js"></script>
</html>
